<template>
  <div class="template01-container">
    <div class="main-resume" id="resume">
      <vuedraggable
        class="wrapper"
        v-model="myResumeInfo.moduleList"
        :group="{ name: 'people', pull: 'clone', put: true }"
        :sort="true"
        @add="addModule"
        @sort="sortModule"
      >
        <transition-group>
          <div v-for="item in myResumeInfo.moduleList" :key="item.id">
            <DragItem
              :moduleName="item.moduleName"
              dragType="content"
              :moduleProps="item.props"
              :id="item.id"
            ></DragItem>
          </div>
        </transition-group>
      </vuedraggable>
    </div>
    <p class="tip">约一页</p>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import DragItem from '@/components/Modules/DragItem.vue'
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
  name: 'TemplateTopAndBottom',
  data() {
    return {
      myResumeInfo: {
        fontSize: '16px',
        themeColor: 'rgb(94, 142, 224)',
        templateName: 'TemplateTopAndBottom',
        moduleList: [
          {
            id: nanoid(),
            moduleName: 'BasicInfo',
            props: {
              moduleTitle: '个人信息',
              name:'Lemon',
              jobIntension:'前端开发工程师',
              infoList: [
                [
                  {
                    title: '年龄:',
                    value: '23',
                  },
                  {
                    title: '经验:',
                    value: '应届生',
                  },
                ],
                [
                  {
                    title: '手机:',
                    value: '15088888888',
                  },
                  {
                    title: '电子游戏:',
                    value: '12345@163.com',
                  },
                ],
              ],
              imgUrl: '/static/avatar-xx.png',
            },
          },
          {
            id: nanoid(),
            moduleName: 'JobIntension',
            props: {
              moduleTitle: '求职意向',
              intention: {
                jobPostion: 'Java开发',
                workCity: '杭州',
                entryTime: '暂定6月',
                excepSalary: '面议',
              },
            },
          },
          {
            id: nanoid(),
            moduleName: 'EduExperience',
            props: {
              moduleTitle: '教育背景',
              eduList: [
                {
                  id: '1',
                  time: '2016-2020',
                  schoolName: '浙江工业大学',
                  major: '软件工程',
                  degree: '本科',
                  dec: '',
                },
                {
                  id: '2',
                  time: '2016-2020',
                  schoolName: '浙江工业大学',
                  major: '软件工程',
                  degree: '硕士',
                  dec: '',
                },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'Awards',
            props: {
              moduleTitle: '荣誉奖励',
              awardList: [
                { id: '1', desc: '2020年国家奖学金' },
                { id: '2', desc: '2019年优秀三好学生' },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'Skill',
            props: {
              moduleTitle: '专业技能',
              skillDecList: [
                { id: new Date().getTime(), desc: '你好' },
                { id: new Date().getTime() + 2, desc: 'html,css,js' },
                { id: new Date().getTime() + 5, desc: 'es6' },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'WorkExperience',
            props: {
              moduleTitle: '工作经历',
              workList: [
                {
                  id: nanoid(),
                  // 工作时间段
                  time: '2016-2020',
                  // 工作公司
                  jobCompany: '杭州数跑科技',
                  // 工作职位
                  jobPosition: 'Java开发',
                  // 工作描述
                  jobDescList: [
                    {
                      id: nanoid(),
                      desc: '负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架',
                    },
                    {
                      id: nanoid(),
                      desc: 'Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现',
                    },
                    {
                      id: nanoid(),
                      desc: '从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案',
                    },
                  ],
                },
              ],
            },
          },
          {
            id: nanoid(),
            moduleName: 'BlankTemplate',
            props: {
              moduleTitle: '新建模块',
              contentList: [
                {
                  id: '2',
                  content: '这是一个新建的模块丫丫丫',
                },
              ],
            },
          },
        ],
      },
    }
  },
  computed: {
    ...mapState(['myResume']),
  },
  methods: {
    // 拖动完成：拖拽组件拖拽时使用的clone方法，导致简历中的模块与模块目录中的指向同一个对象，
    // 使用解构赋值重新赋值拖拽过来的新模块，避免相互影响
    addModule({ newIndex }) {
      const newModule = { ...this.myResumeInfo.moduleList[newIndex] }
      this.myResumeInfo.moduleList[newIndex] = newModule
      // 通知仓库更新数据
      this.$store.commit('setResumeInfo', {
        templateName: 'TemplateTopAndBottom',
        resumeInfo: this.myResumeInfo,
      })
    },
    // 排序发生变化时的事件
    sortModule() {
      // 通知仓库更新数据
      this.$store.commit('setResumeInfo', {
        templateName: 'TemplateTopAndBottom',
        resumeInfo: this.myResumeInfo,
      })
    },
  },
  components: {
    vuedraggable,
    DragItem,
  },
  created() {
    // 先根据模板名称从本地存储读取对应的简历信息
    let data = JSON.parse(localStorage.getItem(this.myResumeInfo.templateName))
    // 如果本地存储已经存在简历信息，就使用本地的数据渲染简历模板
    // 否则使用模板默认数据
    if (data.templateName) {
      this.myResumeInfo = data
    }
    this.$store.commit('setResumeInfo', {
      templateName: 'TemplateTopAndBottom',
      resumeInfo: this.myResumeInfo,
    })
    this.$store.commit('setCurrentTemplateName', this.myResumeInfo.templateName)
  },
}
</script>

<style scoped lang="less">
.template01-container {
  position: relative;
  width: 21cm;
  height: 100%;
  min-height: 29.7cm;
  background-color: #fff;
  margin: 0 auto;

  box-sizing: border-box;
}
.main-resume {
  width: 21cm;
  height: 100%;
  min-height: 29.7cm;
  padding-top: 25px;
}
.tip {
  position: absolute;
  top: 29.7cm;
  left: -60px;
  z-index: 99;
  width: 110%;
  border-top: solid 1px red;
  color: red;
  margin-top: 0;
}
</style>
